<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>aos</title>
		<link rel="stylesheet" type="text/css" href="./dist/aos.css"/>
		<style type="text/css">
			* {
			    box-sizing: border-box;
			}
			
			.item {
				width: 200px;
				height: 200px;
				margin: 50px auto;
				padding-top: 75px;
				background: #F00;
				text-align: center;
				color: #FFF;
				font-size: 3em;
			}
		</style>
	</head>
	<body>
		 <!--淡入淡出 -->
		<div class="item" data-aos="fade-up">1</div> 
		<div class="item" data-aos="fade-down">2</div>
		<div class="item" data-aos="fade-right">3</div>
		<div class="item" data-aos="fade-left">4</div>
		<!--缩放  -->
		<div class="item" data-aos="zoom-in">5</div>
		<div class="item" data-aos="zoom-out">6</div>
		<!-- 滑动 -->
		<div class="item" data-aos="slide-up">7</div>
		<!-- 翻转  -->
		<div class="item" data-aos="flip-up">8</div>
		<div class="item" data-aos="flip-down">9</div>
		<div class="item" data-aos="flip-right">10</div>
		<div class="item" data-aos="flip-left">11</div>
	</body>
</html>
<script src="./dist/aos.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	AOS.init({
	    duration: 1200, //ms，过渡时间，50-3000
		// offset:120,//px，提前或延迟触发
		// easing:ease,//时间曲线
		// delay:0,//s，延迟执行
		// anchor:null，//body，指定元素触发，Element
		// anchor-placement:top-bottom,//top向bottom滚动，top和bottom触发，top|center|bottom任意二个组合，分先后方向，可重复如center-center
		// once:false//是否仅触发一次
	})
	
	
	/* AOS.init({
		//默认 DOMContentLoaded 事件，
		// 指定 某事件触发后，触发AOS初始化
		startEvent: "Element_Event"
		//例如，window的load事件
		startEvent: "load"
	}) */
</script>